<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    /**
     * 语法:
     *
     * CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )
     * CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )
     * @type {Element}
     */
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    ctx.strokeRect( 100, 100, 200, 50 );
    ctx.strokeText( 'Hello JK', 100, 100 );

    ctx.strokeRect( 100, 200, 200, 50 );
    ctx.fillText( 'Hello JK', 100, 200 );

    ctx.beginPath();
    ctx.font = '50px 黑体';
    ctx.strokeRect( 100, 300, 200, 50 );
    ctx.strokeText( 'Hello JK', 100, 300 );

    ctx.strokeRect( 100, 400, 200, 50 );
    ctx.fillText( 'Hello JK', 100, 400 );
</script>
</body>
</html>